import React, { Component } from 'react'
import styles from './index.less'
import { Table, Divider, Tag, Popconfirm, message, Modal, Tree  } from 'antd';
import Authorized, { havePermission } from '@/utils/Authorized';
const { TreeNode } = Tree;

export default class Content extends Component {

    columns = [{
        title: '角色名',
        dataIndex: 'name',
        key: 'name',
      }, {
        title: '拥有权限',
        key: 'authList',
        dataIndex: 'authList',
        render: (authList) => {
            let list = authList.map((tag,index) =>{
                let tag1 = (<Tag color="blue" key={index}>{tag.name}</Tag>)
                let span1 = (<span key={index}>...</span>)
                //超过5个权限显示。。。
                if(index>4){
                    if(index===authList.length-1){
                        return span1
                    }
                }else{
                    return tag1
                }
            })
            return list
        }
      }, {
        title: '操作',
        key: 'action',
        render: (text, record) => (
          <span>
            <Authorized authority={havePermission("AUTH_SMSROLE_EDIT")}>
                <a href="javascript:;" onClick={()=>{
                    this.showModal(record)
                    }} >编辑权限</a>
            </Authorized>
            <Divider type="vertical" />
            <Authorized authority={havePermission("AUTH_SMSROLE_DEL")}>
                <Popconfirm title="确定要删除这个角色?" onConfirm={this.confirm} okText="Yes" cancelText="No">
                    <a href="javascript:;" onClick = {()=>{
                            this.setState({
                                delRoleId: record.id,
                            });
                        }}>删除</a>
                </Popconfirm>
            </Authorized>
          </span>
        ),
      }];

    state = {
        visible: false, //modal显示
        roleId: null,
        delRoleId: false,
        selected: []
    }
    //删除确定
    confirm = (e) => {
        console.log(this.state.delRoleId);
        const { dispatch } = this.props
        dispatch({
            type: 'role/fetchDelRole',
            payload: {
                roleId: this.state.delRoleId,
                page: this.props.page
            }
        })
    }
    //显示modal
    showModal = (role) => {
        console.log(role)
        //获取权限id集合
        let ids = role.authList.map((item)=>{
            return item.id
        })
        console.log(ids)
        //设置可见，当前角色id，当前选中权限id集合
        this.setState({
          visible: true,
          roleId: role.id,
          selected: ids
        });
    }
    //modal确定
    handleOk = (e) => {
        this.setState({
          visible: false
        });
        const { dispatch } = this.props
        dispatch({
            type: 'role/fetchSetAuth',
            payload: {
                roleId: this.state.roleId,
                authIds: this.state.selected,
                page:1
            }
        })
    }
    //modal取消
    handleCancel = (e) => {
        this.setState({
            visible: false
        });
    }
    //树形选择框点击回调
    onCheck = (checkedKeys, info) => {
        let list = info.checkedNodesPositions.map((item) => {
            if(this.getPlaceholderCount(item.pos)>2){
                return item.node.key
            }
        })
        list = list.filter((item)=>{
            if(item){
                return item
            }
        })
        console.log("集合",list)
        this.setState({
            selected: checkedKeys
        })
    }
    //字符串计数
    getPlaceholderCount = (strSource) =>{
        //统计字符串中包含'-'的个数
        var thisCount = 0;
        strSource.replace(/\-|\{\}/g, function (m, i) {
          //m为找到的{xx}元素、i为索引
          thisCount++;
        });
        return thisCount;
    }
    setPage = (e) =>{
        const { dispatch } = this.props
        dispatch({
            type: 'role/fetchSelRoleAll',
            payload: {page:e}
        })
    }

    render() {
        let {authGroupList, roleList, page, total} = this.props
        let { selected } = this.state
        console.log("渲染",authGroupList, roleList, page, total, selected)
        const loop2 = data => data.map((item) => {
            return <TreeNode key={item.id} title={item.name}/>
        })

        const loop = (data) => data.map((item) => {
            if (item.authGroupList) {
                return (
                  <TreeNode key={item.id} title={item.name}>
                    {loop(item.authGroupList)}
                  </TreeNode>
                );
            }
            return (
                <TreeNode key={item.id} title={item.name}>
                    {loop2(item.authList)}
                </TreeNode>
            )
        })

        return (
            <div className = {styles.content}>
                <Table columns={this.columns} dataSource={roleList} 
                    loading = {this.props.authLoading}
                    pagination = {{
                        current: page,
                        total: total,
                        onChange: this.setPage
                    }}
                />
                {this.state.visible && <Modal
                    title="编辑权限"
                    //forceRender={true}
                    visible={this.state.visible}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                    okText="确认"
                    cancelText="取消">
                    <Tree
                        checkedKeys={this.state.selected}
                        checkable={true}
                        defaultExpandAll={true}
                        showLine={true}
                        onCheck={this.onCheck}
                        >
                        {loop(authGroupList)}
                    </Tree>
                </Modal>}
            </div>
        )
    }
}
